<template>
	<div class="list">
		<!-- 工具条 -->
		<el-col :span="24" class="toolbar">
			<el-input placeholder="请输入内容" v-model="filters.name" class="search">
				<el-button slot="append" icon="el-icon-search" @click="getTableData"></el-button>
			</el-input>
		</el-col>
		<el-table :data="tableData" v-loading="listLoading" stripe>
			<el-table-column prop="requires_id" label="ID" width="50"></el-table-column>
			<el-table-column prop="product_name" label="下架作品名称"></el-table-column>
			<el-table-column prop="down_num" label="下架网站数量"></el-table-column>
			<!-- <el-table-column prop="add_time" label="时间"></el-table-column> -->
			<el-table-column label="操作" width="80">
				<template slot-scope="scope">
					<span class="hover" @click="handleAdd(scope.$index, scope.row)">详情</span>
				</template>
			</el-table-column>
		</el-table>
		<!-- 工具条 -->
		<el-col :span="24" class="toolbar" style="padding-top:10px;">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
		<!-- 新增 -->
		<el-dialog :title="formAddTitle" :visible.sync="formAddVisible" width="900px">
			<el-table :data="tableData2" size="small" stripe border style="width: 100%">
				<el-table-column prop="unauth_name" label="盗版标题" width="120"></el-table-column>
				<el-table-column prop="site_name" label="盗版网站" width="120"></el-table-column>
				<el-table-column prop="url" label="盗版网站URL"></el-table-column>
				<el-table-column label="状态" width="60">
					<template slot-scope="scope">
						已下架
					</template>
				</el-table-column>
			</el-table>
			<div class="toolbar clear">
				<el-pagination small layout="prev, pager, next" @current-change="handleCurrentChange2" :page-size="10" :total="total2" style="float:right;">
				</el-pagination>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import { downGetmyrequirelist,downGetmydownlist } from '@/api';

	export default {
		data() {
			return {
				// 翻页
				total: 0,
				page: 1,
				total2: 0,
				page2: 1,
				listLoading: false,
				formAddTitle: '监测任务：',
				// 表格
				tableData: [],
				tableData2: [],
				// 添加弹出框
				formAddVisible: false,
				requires_id: null,
				filters: {
					name: '',
				},
			}
		},
		mounted() {
			this.getTableData();
		},
		computed: {
			...mapState([
				'crocUser',
			]),
		},
		methods: {
			...mapMutations([
				'OUT_LOGIN',
			]),
			
			// 翻页 
			handleCurrentChange(val) {
				this.page = val;
				this.getTableData();
			},
			// 翻页 
			handleCurrentChange2(val) {
				this.page2 = val;
				this.getTableData2();
			},
			getTableData(){
				this.listLoading = true;
				let para = {
					uid: this.crocUser.uid,
					name: this.filters.name,
					page: this.page,
					pagesize: 10,
				};
				downGetmyrequirelist(para).then(res => {
					this.listLoading = false;
					if (res.data) {
						this.total = res.total;
						this.tableData = res.data;
					}else if(res.tologin) {
						this.OUT_LOGIN();
						this.$router.push('/login');
					}else {
						this.$message.error(res.msg);
					}
				});
			},
			getTableData2(){
				let para = {
					uid: this.crocUser.uid,
					requires_id: this.requires_id,
					page: this.page2,
					pagesize: 10,
				};
				downGetmydownlist(para).then(res=>{
					if (res.data) {
						this.total2 = res.total;
						this.tableData2 = res.data;
					}else if(res.tologin) {
						this.OUT_LOGIN();
						this.$router.push('/login');
					}else {
						this.$message.error(res.msg);
					}
				})
				
			},
			// 显示添加
			async handleAdd(index,row){
				this.formAddTitle = `监测任务：${row.product_name}`;
				this.requires_id = row.requires_id;
				this.getTableData2();
				this.formAddVisible = true;
			},

			// 提交添加
			submitAdd(formName){
				this.$refs[formName].validate((valid) => {
					if (valid) {
					
						// let para = Object.assign({},this.formAdd);
						// para.uid = this.crocUser.uid,
						// userAdd(para).then(res => {
						// 	if(res.data){
						// 		this.$message.success(res.msg);
						// 		this.resetForm(formName);
						// 		this.formAddVisible = false;
						// 		this.getTableData();
						// 	}else if(res.tologin) {
						// 		this.OUT_LOGIN();
						// 		this.$router.push('/login');
						// 	}else {
						// 		this.$message.error(res.msg);
						// 	}
						// })

					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			// 重置 
			resetForm(formName){
				this.$refs[formName].resetFields();
			},
		}
	}

</script>

<style scoped lang="scss">
</style>